<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>修改密码</span>  
    </div>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        show-password
      >
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
             show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
             show-password
          ></el-input>
        </el-form-item>

        <el-form-item label="确认新密码" prop="twoPass">
          <el-input
            type="password"
            v-model="ruleForm.twoPass"
            autocomplete="off"
             show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm"
            >确定</el-button
          >
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import {checkoldpwd} from '../../api/user'
import {usersEditPwd} from '../../api/user'
export default {
   data() {
    var validatePass =async (rule, value, callback) => {
      if (value === "") {
        
        callback(new Error("请输入密码"));
      } else if(!/^[1-9][0-9]{5,11}$/.test(value)){
          callback(new Error("必须是6~12位的数字"));
      }else{
          let res=await checkoldpwd({params:{
            oldPwd:this.ruleForm.pass
          }})
          console.log(res);
          let {msg,code}=res
           
        if(code===0){
          callback(new Error("请输入密码"));
        }else{
           this.$refs.ruleForm.validateField("checkPass");
          callback()
        }
      }

      
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      }else if(!/^[1-9][0-9]{5,11}$/.test(value)){
          callback(new Error("必须是6~12位的数字"));
      } else if (value === this.ruleForm.pass) {
        callback(new Error("旧密码和新密码不能一致!"));
      } else {
        this.$refs.ruleForm.validateField("twoPass"); //验证表单某个字段 确认密码字段
        callback();
      }
    };

    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请填写确定密码"));
      }else if(value !==this.ruleForm.checkPass){
          callback(new Error("两次密码要一致"));
      } else {
        callback();
      }
    };


    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        twoPass:'',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        twoPass: [{ validator: validatePass3, trigger: "blur" }],
      },
    };
  },

  methods: {
     //修改密码
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          let res =await usersEditPwd({newPwd:this.ruleForm.checkPass})
          console.log(res);
          let {code,msg}=res
          if (code===0) {
            this.$message({
              type: "success",
              message: "修改成功!请重新登录",         
            });
            this.ruleForm=""
          }else{
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.box-card{
    width: 600px;
    .el-input{
    width: 350px
}

}

</style>